import React from 'react'
import {Route, withRouter } from 'react-router-dom';
import {inject, observer} from 'mobx-react';
import QueueAnim from 'rc-queue-anim';
import HisBlog from './index';

@inject('hisBlogStore')
@withRouter
@observer
export default class HisBlogRoute extends React.Component {
  render() {
    const { hisBlogStore, path, userId } = this.props;
    return (
      <Route
        key={`blog-hisBLog`}
        path={path}
        render={() => {
          return (
            <QueueAnim>
              <div className="blog-hisBLog-route wm-route-layout" style={{ position: 'fixed' }} key={`blog-hisBLog-div`}>
                {hisBlogStore.child && this.getRoute(hisBlogStore.child, path)}
                <HisBlog store={hisBlogStore} path={path} userId={userId}/>
              </div>
            </QueueAnim>
          );
        }}
      />
    );
  }
  
  /**
   * 递归组成多个列表路由，用以实现返回上一级的功能。
   *
   * @param store
   * @param path
   * @returns {*}
   */
  getRoute = (store, path) => {
    const { child, childId } = store;
    path = path + "/" + childId;
    return (
      <Route
        key={`blog-hisBLog-${childId}`}
        path={path}
        render={() => {
          return (
            <QueueAnim>
              <div className="wm-route-layout" key={`blog-hisBLog-${childId}-div`}>
                {child && this.getRoute(child, path)}
                <HisBlog store={store} path={path} userId={childId}/>
              </div>
            </QueueAnim>
          );
        }}
      />
    );
  }
}